<template>
  <div>
    <flexform ref="formRef" :formList="formList" @post="loginfunc" :formValue="formValue">
      <template #touxiang>
        <n-gi :span="24">
          <n-form-item path="touxiang" label="头像">
            <upimg @changefile="changetouxiang"></upimg>
          </n-form-item>
        </n-gi>
      </template>
    </flexform>
    <n-button type="primary" block secondary strong @click="denglu">
      注册
    </n-button>
  </div>
</template>

<script setup name="zhuce">
import {ref, onMounted, defineEmits, defineProps, nextTick, watch, computed} from "vue"
import {useRoute, useRouter} from "vue-router";
import http from "@/request/request"
const checkpassword = (rule, value) => {

}
const router = useRouter()
const route = useRoute()
const formValue = ref({})
const formRef = ref(null)
const formList = ref([
  {
    label: "账号",
    type: "input",
    rules: [{required: true, message: "请输入账号", trigger: ["input", "change", "blur"]},],
    placeholder: "请输入账号",
    key: "username"
  },
  {
    label: "密码",
    type: "input",
    rules: [{required: true, message: "请输入密码", trigger: ["input", "change", "blur"]},],
    placeholder: "请输入密码",
    key: "password",
    password: "password",
  },
  {
    label: "确认密码",
    type: "input",
    rules: [{required: true, message: "请输入密码", trigger: ["input", "change", "blur"]}, {
      validator: checkpassword,
      trigger: ["input", "change", "blur"]
    }],
    placeholder: "请再次输入密码",
    key: "password1",
    password: "password",
  },
  {label: "昵称", type: "input", rules: [], placeholder: "请输入昵称", key: "name"},
  {label: "手机号码", type: "input", rules: [], placeholder: "请输入手机号码", key: "mobile"},
  {type:"slot", name: "touxiang"},
])
const filelist = ref([])
const denglu = () => {
  formRef.value.jiaoyan(loginfunc)
}
// 校验完成的回调
const loginfunc = () => {
  http.zhuce(formValue.value).then(res=>{
    if(res.status === 200){
      message.success("注册成功")

    }
  })
}
const changetouxiang=(val)=>{
  console.log("触发回调",val)
  formValue.value["touxiang"] = val
}
</script>

<style scoped>

</style>